{% extends "datapanel/base.html" %}
{% block content %}
{% load static %}

<div class="row">
    <div id="graph-1-1" class="col bg-light m-2 p-3" style="width: 500px;height:400px;">.col</div>
    <div id="graph-1-2" class="col bg-light m-2 p-3" style="width: 550px;height:400px;" >.col</div>
</div>
<div class="row">
    <div id="graph-2-1" class="col bg-light m-2 p-3" style="width: 550px;height:400px;">.col</div>
    <div id="graph-2-2" class="col bg-light m-2 p-3" style="width: 550px;height:400px;">.col</div>
</div>
{% comment %} <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> {% endcomment %}
<script src="{% static 'datapanel/js/echarts.js' %}"></script>
<script type="text/javascript">
    var chartDom1_1 = document.getElementById('graph-1-1');
    var myChart1_1 = echarts.init(chartDom1_1);
    var option1_1;
    
    option1_1 = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }
      ]
    };
    
    myChart1_1.setOption(option1_1);


var chartDom1_2 = document.getElementById('graph-1-2');
var myChart1_2 = echarts.init(chartDom1_2);
var option1_2 = {
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%']
  },
  visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
        gt: 1,
        lt: 3,
        color: 'rgba(0, 0, 180, 0.4)'
      },
      {
        gt: 5,
        lt: 7,
        color: 'rgba(0, 0, 180, 0.4)'
      }
    ]
  },
  series: [
    {
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: '#5470C6',
        width: 5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
      },
      areaStyle: {},
      data: [
        ['2019-10-10', 200],
        ['2019-10-11', 560],
        ['2019-10-12', 750],
        ['2019-10-13', 580],
        ['2019-10-14', 250],
        ['2019-10-15', 300],
        ['2019-10-16', 450],
        ['2019-10-17', 300],
        ['2019-10-18', 100]
      ]
    }
  ]
};

myChart1_2.setOption(option1_2);
    
</script> 
<script>

var chartDom2_1 = document.getElementById('graph-2-1');
var myChart2_1 = echarts.init(chartDom2_1);
var option2_1 = {
  legend: {
    data: ['国内市场', '海外市场'],
    left: 'right',
    orient: 'vertical'
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '销量', max: 6500 },
      { name: '用户评价', max: 16000 },
      { name: '价格', max: 30000 },
      { name: '运费', max: 38000 },
      { name: '功能', max: 52000 },
      { name: '平台', max: 25000 }
    ]
  },
  series: [
    {
      name: '国内 vs 国外',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '国内市场'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: '海外市场'
        }
      ]
    }
  ]
};

 myChart2_1.setOption(option2_1);

</script>

<script>
var chartDom2_2 = document.getElementById('graph-2-2');
var myChart2_2 = echarts.init(chartDom2_2);
var option2_2 = {
  legend: {
    orient: 'vertical',
    left: 'right'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [30, 140],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
      ]
    }
  ]
};

myChart2_2.setOption(option2_2);
</script>

{% endblock content %}

